<template>
  <div class="box">
    <hu-card class="mt0" v-show="MixinShowSearch">
      <el-form class="mt10" :model="queryParams" ref="queryForm" label-width="100px" >
        <el-row :gutter="50">
          <el-col :span="6">
            <el-form-item label="消息名称" prop="title">
              <el-input v-model="queryParams.title" placeholder="请输入消息名称"   @keyup.enter.native="searchList" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item v-show="activeName === '1'" label="发起时间" prop="pickerValue">
              <el-date-picker @change="getPicker" v-model="pickerValue" style="width: 100%" type="daterange" format="yyyy-MM-dd" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item v-show="activeName === '2'" label="截止时间" prop="pickerValue1">
              <el-date-picker @change="getPicker1" v-model="pickerValue1" style="width: 100%" type="daterange" format="yyyy-MM-dd" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item v-show="activeName === '5'" label="发起时间" prop="pickerValue1">
              <el-date-picker @change="getPicker2" v-model="pickerValue2" style="width: 100%" type="daterange" format="yyyy-MM-dd" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="通知时间" prop="pickerValue">
              <el-date-picker @change="getPickerNotice" v-model="pickerValueNotice" style="width: 100%" type="daterange" format="yyyy-MM-dd" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="activeName === '3' || activeName === '4' ? 12 : 6">
            <el-form-item class="searchFromButton" style="float: right;">
              <el-button  @click="clearList" icon="el-icon-refresh-left">重置</el-button>
              <el-button type="primary"  @click="searchList" icon="el-icon-search">查询</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form></hu-card>
    <hu-card v-loading.fullscreen.lock="loading" style="padding-top: 10px">
      <div class="read_all" v-show="activeName == '5' || activeName == '4' || activeName == '3'">
      </div>
      <el-tabs v-model="activeName" @tab-click="searchList">
        <el-tab-pane :label="`待办(${$store.getters.messages.backlog})`" name="1">
          <div class="autoStyle">
            <!-- :class="dataIndex === index ? 'select' : ''" -->
            <div @click="addAudit(item)" v-for="(item, index) in tableData" :key="item.id" class="tent_left">
              <div class="left_one">
                <div>
                  <span class="title_tent">{{ item.module }}</span>
                </div>
                <div>
                  <div class="text_store" :class="getCurrent(item.flowStatusKey).typeBut">
                    {{ getTitle(item.flowStatusKey) }}
                  </div>
                </div>
              </div>
              <div v-if="item.moduleId !== 344" class="tent_tent">
                <p>单位名称：{{ item.companyName }}</p>
                <p>发起时间：{{ item.createDate }}</p>
              </div>
              <div v-else class="tent_tent">
                <p>行车路线：{{ item.carDirections }}</p>
                <p>出发时间：{{ item.carTravelDate }}</p>
                <p>发起时间：{{ item.ctime }}</p>
                <p>用车事由：{{ item.carReason }}</p>
              </div>
              <div class="tent_foot">
                <div>
                  <span>发起人：{{ item.flowInitiateUserName }}</span>
                </div>
                <div style="display: flex; align-items: center">
                  <div class="is_read_list" :style="{
                      'background-color': item.isRead ? '#fff' : '#ff9502',
                    }"></div>
                  {{ todo_time(item.createDate) }}
                </div>
              </div>
            </div>
            <template v-if="!tableData.length">
              <div style="text-align: center; margin-top: 30px">
                <img style="width: 400px;" src="@/assets/images/helpKong.png" />
                <p style="margin: 20px; font-size: 18px; color: #ccc">
                  暂无数据
                </p>
              </div>
            </template>
          </div>
        </el-tab-pane>
        <el-tab-pane :label="`工作(${$store.getters.messages.regularlywork})`" name="2">
          <div class="autoStyle">
            <div v-for="(item, index) in tableData" :key="item.id" @click="skip(item)" class="tent_left">
              <div class="left_one">
                <div>
                  <span class="title_tent">{{ item.module }}</span>
                </div>
                <div>
                  <div class="text_store" :class="getCurrent().typeBut">
                    工作
                  </div>
                </div>
              </div>
              <div class="tent_tent">
                <p>单位名称：{{ item.companyName }}</p>
                <p>开始时间：{{ item.dailyStartTime }}</p>
                <p>截止时间：{{ item.dailyEndTime }}</p>
              </div>
              <div class="tent_foot">
                <div>
                  <span>发起人：{{ item.flowInitiateUserName }}</span>
                </div>
                <div style="display: flex; align-items: center">
                  <div class="is_read_list" :style="{
                      'background-color': item.isRead ? '#fff' : '#ff9502',
                    }"></div>
                  {{ todo_time(item.createDate) }}
                </div>
              </div>
            </div>
            <template v-if="!tableData.length">
              <div style="text-align: center; margin-top: 30px">
                <img style="width: 400px;" src="@/assets/images/helpKong.png" alt="" />
                <p style="margin: 20px; font-size: 18px; color: #ccc">
                  暂无数据
                </p>
              </div>
            </template>
          </div>
        </el-tab-pane>
        <el-tab-pane name="3">
          <template slot="label">
            <div style="display: flex;align-items: center;justify-content: center;">通知({{$store.getters.messages.workflow}})
              <el-tooltip class="item" effect="dark" placement="top">
                <template slot="content">
                  <div>
                    标记为已读
                  </div>
                </template>
                <div style="margin-left: 5px;">
                  <i class="el-icon-edit" @click="readAll" style="cursor: pointer;"></i>
                </div>
              </el-tooltip>
            </div>
          </template>
          <div class="autoStyle">
            <div v-for="(item, index) in tableData" :key="item.id" @click="skip(item)" class="tent_left">
              <div class="left_one">
                <div>
                  <span class="title_tent">{{ item.module }}</span>
                </div>
                <div>
                  <div class="text_store" :class="getCurrent(item.flowStatusKey).typeBut">
                    {{ getTitle(item.flowStatusKey) }}
                  </div>
                </div>
              </div>
              <div v-if="item.moduleId !== 344" class="tent_tent">
                <p>单位名称：{{ item.companyName }}</p>
                <p>发起时间：{{ item.createDate }}</p>
              </div>
              <div v-else class="tent_tent">
                <p>行车路线：{{ item.carDirections }}</p>
                <p>出发时间：{{ item.carTravelDate }}</p>
                <p>发起时间：{{ item.ctime }}</p>
                <p>用车事由：{{ item.carReason }}</p>
              </div>
              <div class="tent_foot">
                <div>
                  <span>发起人：{{ item.flowInitiateUserName }}</span>
                </div>
                <div style="display: flex; align-items: center">
                  <div class="is_read_list" :style="{
                      'background-color': item.isRead ? '#fff' : '#ff9502',
                    }"></div>
                  {{ todo_time(item.createDate) }}
                </div>
              </div>
            </div>
            <template v-if="!tableData.length">
              <div style="text-align: center; margin-top: 30px">
                <img style="width: 400px;" src="@/assets/images/helpKong.png" alt="" />
                <p style="margin: 20px; font-size: 18px; color: #ccc">
                  暂无数据
                </p>
              </div>
            </template>
          </div>
        </el-tab-pane>
      </el-tabs>
      <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
    </hu-card>

    <hu-modal title="详情" :show-modal.sync="showModal" :loading="loading" :close="false" :submit="false">
      <template v-slot:elseBut>
        <div style="display: flex; justify-content: end">
          <el-button  @click="reset">取消</el-button>
          <template v-if="auditList.flowStatusKey === 2">
            <el-button type="danger"  @click="reject">拒绝</el-button>
            <el-button type="primary"  @click="addFrom">同意</el-button>
          </template>
          <template v-else-if="
              auditList.flowStatusKey === 5 ||
              auditList.flowStatusKey === 6 ||
              auditList.flowStatusKey === 7
            ">
            <el-button type="primary"  @click="skip(auditList)">重新发起</el-button>
          </template>
        </div>
      </template>
      <template>
        <herder-audit :rowTaskId="rowTaskId" />
        <el-tabs v-model="activeName1" style="margin-top: 5px">
          <el-tab-pane label="基本资料" name="0">
            <essential-item :auditList="auditList"></essential-item>
            <!-- 项目立项申请单 -->
          </el-tab-pane>
          <el-tab-pane label="审批信息" name="1">
            <div style="display: flex">
              <div>
                <audit :rowTaskId="rowTaskId" />
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </template>
    </hu-modal>
    <hu-drawer title="同意" :open.sync="open1" :loading="loading" @submit="commit1">
      <!-- tent sta -->
      <div>
        <el-form label-width="110px">
          <el-form-item label="是否现场监理" v-if="auditList.id === 'c98ebdffc46b1fde1b792ad43fa6180e'" prop="isSceneSupervision">
            <el-radio-group v-model="formChart.isSceneSupervision">
              <el-radio :label="true">是</el-radio>
              <el-radio :label="false">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="审批意见" prop="opinion">
            <el-input v-model="formChart.opinion" placeholder="请输入审批意见" type="textarea" :autosize="{ minRows: 5, maxRows: 10}"   />
          </el-form-item>
        </el-form>
      </div>
      <!-- tent end -->
    </hu-drawer>
    <hu-drawer title="拒绝" :open.sync="open2" :loading="loading" @submit="commit2">
      <!-- tent sta -->
      <div>
        <el-form label-width="110px">
          <el-form-item label="拒绝原因" prop="opinion">
            <el-input v-model="formChart.opinion" placeholder="请输入拒绝原因" type="textarea" :autosize="{ minRows: 5, maxRows: 10}"   />
          </el-form-item>
        </el-form>
      </div>
      <!-- tent end -->
    </hu-drawer>
  </div>
</template>
<script>
import essentialItem from "@/views/components/audit/essentialItem.vue";
import Audit from "../components/audit/audit.vue";
import herderAudit from "../components/audit/herderAudit.vue";
import * as http from "@/api/news/message";
export default {
  components: {
    Audit,
    essentialItem,
    herderAudit,
  },
  name: "NewsMessage",
  data() {
    return {
      open1: false,
      open2: false,
      formChart: {},
      auditList: {},
      rowTaskId: undefined,
      showModal: false,
      activeName: "1",
      activeName1: "0",
      dataIndex: 0,
      loading: true, // 加载
      // list 参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      total: 0, // table total
      tableData: [], // table Data
      pickerValue: undefined, // 时间
      pickerValue1: undefined, // 时间
      pickerValue2: undefined, // 时间
      pickerValueNotice: undefined,
    };
  },
  computed: {
    getCurrent() {
      return (type) => {
        if (type == 1 || type == 2 || type == 4) {
          return {
            typeBut: "typeBut1",
            icon: "el-icon-more",
            color: { color: " #496dff" },
            bgc: { "background-color": "#5a8bff" },
          };
        } else if (type == 3) {
          return {
            typeBut: "typeBut2",
            icon: "el-icon-check",
            color: { color: " #39ce78" },
            bgc: { "background-color": "#39ce78" },
          };
        } else if (type == 5 || type == 6 || type == 7 || type == 8) {
          return {
            typeBut: "typeBut3",
            icon: "el-icon-close",
            color: { color: " #fe5a57" },
            bgc: { "background-color": "#fe5a57" },
          };
        } else {
          return {};
        }
      };
    },
    // 审核状态文字
    getTitle() {
      return (type) => {
        if (type == 0) {
          return "";
        } else if (type == 2) {
          return "待审批";
        } else if (type == 3) {
          return "已完成";
        } else if (type == 6) {
          return "已驳回";
        } else if (type == 7) {
          return "已撤销";
        }
      };
    },
  },
  created() {
    if (this.$route.query.activeName) {
      this.activeName = this.$route.query.activeName;
    }
    this.getList();
  },
  methods: {
    todo_time(time) {
      if (!time) {
        return "";
      }
      var oDate = new Date();
      var newHaoMiao1 = oDate.getTime(); //当前时间,含有时分秒
      oDate.setHours(0);
      oDate.setMinutes(0);
      oDate.setSeconds(0);
      oDate.setMilliseconds(0);
      var newHaoMiao2 = oDate.getTime(); //当前时间,不含有时分秒
      var newTime = time.replace(new RegExp("-", "gm"), "/");
      var arrTime = time.substring(0, 11).replace(new RegExp("-", "gm"), "/"); //截取时间，不含有时分秒
      var showTime = time.substring(0, 11);
      var oldHaoMiao1 = new Date(newTime).getTime(); //含有时分秒的转化成毫秒
      var oldHaoMiao2 = new Date(arrTime).getTime(); //不含有时分秒的转化成毫秒
      var d1 = (newHaoMiao1 - oldHaoMiao1) / 1000;
      var d2 = (newHaoMiao2 - oldHaoMiao2) / 1000;
      var d_result = "";
      if (d2 > 0) {
        //是几天前
        var d_days = parseInt(d2 / 86400);
        if (d_days === 1) {
          d_result = "昨天";
        } else if (d_days >= 2) {
          d_result = showTime;
        }
      } else {
        //是今天
        var d_hours = parseInt(d1 / 3600);
        var d_minutes = parseInt(d1 / 60);
        if (d_hours > 0) {
          d_result = d_hours + "小时前";
        } else if (d_hours <= 0 && d_minutes > 0) {
          d_result = d_minutes + "分钟前";
        } else {
          d_result = "刚刚";
        }
      }
      return d_result;
    },
    resetMajor() {
      this.formChart = {
        isSceneSupervision: true,
      };
    },
    // 同意
    addFrom() {
      this.resetMajor();
      this.open1 = true;
    },
    // 拒绝
    reject() {
      this.resetMajor();
      this.open2 = true;
    },
    commit1() {
      this.loading = true;
      let params = {
        ...this.formChart,
        userId: this.$store.getters.userInfo.id,
        id: this.auditList.backlogId,
      };
      http.approve(params).then((response) => {
        this.$modal.msgSuccess("同意审批成功");
        this.searchList();
        this.open1 = false;
        this.showModal = false;
      });
    },
    commit2() {
      this.loading = true;
      let params = {
        ...this.formChart,
        userId: this.$store.getters.userInfo.id,
        id: this.auditList.backlogId,
      };
      http.rejected(params).then((response) => {
        this.$modal.msgSuccess("拒绝审批成功");
        this.searchList();
        this.open2 = false;
        this.showModal = false;
      });
    },
    // 点击审核
    addAudit(row) {
      this.auditList = {
        ...row,
        businessKey: row.businessKey,
        moduleId: row.moduleId,
      };

      this.$store.dispatch("GetMessages");
      //
      this.showModal = true;
      this.$nextTick(() => {
        this.rowTaskId = row.backlogId;
      });
    },
    reset() {
      this.showModal = false;
      this.rowTaskId = undefined;
    },
    // 列表 List
    getList() {
      this.loading = true;
      let type =
        this.activeName !== "2" &&
        this.activeName !== "3" &&
        this.activeName !== "4" &&
        this.activeName !== "5"
          ? "1"
          : "2";
      let backlogType =
        this.activeName === "1"
          ? 0
          : this.activeName === "2"
          ? 1
          : this.activeName === "3"
          ? undefined
          : this.activeName === "4"
          ? 2
          : 3;
      let params = {
        ...this.queryParams,
        type: type,
        backlogType: backlogType,
        receiveUserId: this.$store.getters.userInfo.id,
        isRead: this.activeName === "1" ? false : undefined,
      };
      http.getList(params).then(({ stateCode, result }) => {
        if (stateCode == 200) {
          this.loading = false;
          this.tableData = result.records;
          this.total = result.total;
          this.$store.dispatch("GetMessages");
        }
      });
    },
    // 全部已读
    readAll() {
      this.loading = true;
      let params = {
        ...this.queryParams,
        type: 2,
        receiveUserId: this.$store.getters.userInfo.id,
      };
      http.setReadAll(params).then(({ stateCode, result }) => {
        if (stateCode == 200) {
          this.loading = false;
          this.$store.dispatch("GetMessages");
        }
      });
    },
    // 清除弹出
    clearList() {
      this.pickerValue = undefined;
      this.pickerValue1 = undefined;
      this.pickerValue2 = undefined;
      this.pickerValueNotice = undefined;
      this.queryParams = {
        pageNum: this.queryParams.pageNum,
        pageSize: this.queryParams.pageSize,
      };
    },
    // 查询 list
    searchList() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    // 搜索时间
    getPicker(arrDate) {
      this.queryParams.flowInitiateStartTime = arrDate
        ? `${arrDate[0]} 00:00:00`
        : undefined;
      this.queryParams.flowInitiateEndTime = arrDate
        ? `${arrDate[1]} 23:59:59`
        : undefined;
    },
    getPicker1(arrDate) {
      this.queryParams.dailyStartTime = arrDate
        ? `${arrDate[0]} 00:00:00`
        : undefined;
      this.queryParams.dailyEndTime = arrDate
        ? `${arrDate[1]} 23:59:59`
        : undefined;
    },
    getPicker2(arrDate) {
      this.queryParams.examStartTime = arrDate
        ? `${arrDate[0]} 00:00:00`
        : undefined;
      this.queryParams.examEndTime = arrDate
        ? `${arrDate[1]} 23:59:59`
        : undefined;
    },
    getPickerNotice(arrDate) {
      this.queryParams.startNoticeTime = arrDate
        ? `${arrDate[0]} 00:00:00`
        : undefined;
      this.queryParams.endNoticeTime = arrDate
        ? `${arrDate[1]} 23:59:59`
        : undefined;
    },
    skip(row) {
      http.getRead(row.id).then(() => {
        this.$store.dispatch("GetMessages");
        this.$router.push({
          path: this.routePrams(row.moduleId)[0].path,
          params: {
            ...this.auditList,
          },
        });
      });
    },
    // 获取页面路由消息
    routePrams(id) {
      return this.$utils.searchTree(id, this.$store.getters.topbarRouters);
    },
    read() {},
  },
};
</script>
<style lang="scss" scoped>
.tent_left {
  margin-bottom: 10px;
  background: #ffffff;
  box-shadow: 0px 0px 8px 0px rgba(55, 90, 228, 0.16);
  border-radius: 2px;
  margin: 10px;
  transition: 0.3s;
  cursor: pointer;
  &:hover {
    box-shadow: 0px 0px 10px 0px rgba(55, 90, 228, 0.36);
  }
  &:active {
    transform: translateY(3px);
  }
  .left_one {
    display: flex;
    justify-content: space-between;
    padding: 8px 15px; //
    align-items: center;
    border-bottom: 1px solid #eaeaea;
    .title_tent {
      font-weight: 700;
    }
  }
}
.one_text {
  background-color: #f5f7fc;
  color: #565656;
  padding: 3px 5px;
  margin-left: 10px;
  border-radius: 3px;
}
.text_store {
  width: 82px;
  height: 30px;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.tent_tent {
  padding: 8px 15px;
  p {
    line-height: 26px;
  }
}
.tent_foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 15px 15px;
  .tent_img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin-right: 7px;
  }
  .is_read_list {
    border-radius: 50%;
    width: 12px;
    height: 12px;
    margin-right: 5px;
  }
}

.typeBut1 {
  color: #496dff;
  background: #f5f7fc;
  border: 1px solid #5a8bff;
  &:hover {
    background: #edf1fb;
  }
}
.typeBut2 {
  color: #39ce78;
  background: #f5fff9;
  border: 1px solid #39ce78;
  &:hover {
    background: #e7fbee;
  }
}
.typeBut3 {
  color: #fe5a57;
  background: #fff3f3;
  border: 1px solid #fe5a57;
  &:hover {
    background: #fbe6e6;
  }
}
.typeBut4 {
  color: #f8af48;
  background: #fff3f3;
  border: 1px solid #ff9502;
  &:hover {
    background: #fbe6e6;
  }
}
.select {
  background-color: rgba(255, 255, 255, 0.95) !important;
  box-shadow: 0 0 6px rgba(36, 42, 48, 0.55) !important;
}
.autoStyle {
  overflow: auto;
  min-height: 68vh;
}
.box_const {
  position: relative;
}
.read_all {
  position: absolute;
  right: 20px;
  z-index: 99;
}
</style>
